<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
    <title>layout</title>
    <link rel="stylesheet" href="../../dist/seedsui.min.css">
    <style>
        #row{
        	width: 100%;
        	background-color:#fff;
        	margin:10px 0;
        }
        #box{
        	width:210px;
        	height:210px;
        	margin:10px auto;
        	background-color:#fff;
        	overflow:hidden;
        }
        .case{
        	width: 70px;
        	height:70px;
        }
        p{
        	margin-top:20px;
            text-align:center;
        }
        .anim-move{
            -webkit-animation:animmove 5s linear;
            -webkit-animation-fill-mode:forwards;
        }
        @-webkit-keyframes animmove{
            from{
                transform:translateX(0);
            }to{
                transform:translateX(-1050px);
            }
        }
    </style>
</head>

<body ontouchstart="">
        <header>
            <div class="titlebar">
                <a class="titlebar-button titlebar-left" href="javascript:back()">
                    <i class="icon icon-arrowleft"></i>
                </a>
                <h1 class="titlebar-title">
                    <ul class="tabbar tabbar-rect" data-col="2" id="ID-Tabbar" style="width: 50%;">
                        <li class="tab active">
                            <label class="tab-label">box布局</label>
                        </li>
                        <li class="tab">
                            <label class="tab-label">flex布局</label>
                        </li>
                    </ul>
                </h1>
            </div>
        </header>
        <article style="padding-top:44px">
        <div class="slider-container" id="ID-Pages" style="height: 300px;">
        <div class="slider-wrapper">
        <div class="slider-slide">
            <!--第一页:start-->
            <div class="statusbar">
                box布局(兼容android4.0及以上)
            </div>
            <p>box-left</p>
            <div class="box box-left" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>
            <p>box-center</p>
            <div class="box box-center" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>
            
            <p>box-right</p>
            <div class="box box-right" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>
            
            <p>box-top</p>
            <div class="box box-top" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>

            <p>box-middle</p>
            <div class="box box-middle" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>
            
            <p>box-bottom</p>
            <div class="box box-bottom" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>
            
            <p>box-middlecenter</p>
            <div class="box box-middlecenter" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>
            
            <p>box-vertical</p>
            <div class="box box-vertical" id="box">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
                <div class="case" style="background-color:pink;"></div>
                <div class="case" style="background-color:lightgrey;"></div>
                <div class="case" style="background-color:lightgreen;"></div>
            </div>

            <p>box-horizontal</p>
            <div class="box box-horizontal" id="box">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
                <div class="case" style="background-color:pink;"></div>
                <div class="case" style="background-color:lightgrey;"></div>
                <div class="case" style="background-color:lightgreen;"></div>
            </div>
            <!--第一页:end-->
        </div>
        <div class="slider-slide">
            <!--第二页:start-->
            <div class="statusbar">
                flex布局(功能过新，兼容性不好)
            </div>

            <p>flex-shrink</p>
            <div style="width:210px;overflow:hidden;margin:8px auto;">
                <div class="flex flex-shrink anim-move">
                    <div style="background-color:coral;height:100px;"></div>
                    <div style="background-color:lightblue;"></div>
                    <div style="background-color:khaki;"></div>
                    <div style="background-color:pink;"></div>
                    <div style="background-color:lightgrey;"></div>
                    <div style="background-color:lightgreen;"></div>
                </div>
            </div>

            <p>flex-left</p>
            <div class="flex flex-left" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>
            <p>flex-center</p>
            <div class="flex flex-center" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>
            
            <p>flex-right</p>
            <div class="flex flex-right" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>
            
            <p>flex-top</p>
            <div class="flex flex-top" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>

            <p>flex-middle</p>
            <div class="flex flex-middle" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>
            
            <p>flex-bottom</p>
            <div class="flex flex-bottom" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>
            
            <p>flex-middlecenter</p>
            <div class="flex flex-middlecenter" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>
            
            <p>flex-vertical</p>
            <div class="flex flex-vertical" id="box">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
                <div class="case" style="background-color:pink;"></div>
                <div class="case" style="background-color:lightgrey;"></div>
                <div class="case" style="background-color:lightgreen;"></div>
            </div>
            <p>flex-vertical-reverse</p>
            <div class="flex flex-vertical-reverse" id="box">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
                <div class="case" style="background-color:pink;"></div>
                <div class="case" style="background-color:lightgrey;"></div>
                <div class="case" style="background-color:lightgreen;"></div>
            </div>

            <p>flex-horizontal</p>
            <div class="flex flex-horizontal" id="box">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
                <div class="case" style="background-color:pink;"></div>
                <div class="case" style="background-color:lightgrey;"></div>
                <div class="case" style="background-color:lightgreen;"></div>
            </div>
            <p>flex-horizontal-reverse</p>
            <div class="flex flex-horizontal-reverse" id="box">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
                <div class="case" style="background-color:pink;"></div>
                <div class="case" style="background-color:lightgrey;"></div>
                <div class="case" style="background-color:lightgreen;"></div>
            </div>

            <p>flex-between</p>
            <div class="flex flex-between" id="box">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
            </div>
            <p>flex-around</p>
            <div class="flex flex-around" id="box">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
            </div>
            <p>flex-vertical-stretch</p>
            <div class="flex flex-vertical-stretch" id="box">
                <div class="case" style="background-color:coral;height: auto;"></div>
                <div class="case" style="background-color:lightblue;height: auto;"></div>
            </div>
            <!--第二页:end-->
        </div>
        </div>
        </div>
        </article>
    <script src="../../dist/seedsui.min.js"></script>
    <script>
    	var view={
            /*=========================
              Model
              ===========================*/
            initialize:function(){
                this.render();//使用backbone时，此行无用
            },
            render:function(){
                var self = this;
                //渲染页面
                this.slides=document.querySelectorAll("#ID-Pages > .slider-wrapper > .slider-slide");
                this.sliderContainer=document.getElementById("ID-Pages");
                this.sliderContainer.style.height=(window.innerHeight-84)+"px";

                this.tabbarContainer=document.getElementById("ID-Tabbar");
                this.tabs=this.tabbarContainer.querySelectorAll(".tab");

                this.slider=this._initSlider();

                this._attach();//使用backbone时，此行无用
            },
            refresh:function(){
                console.log("刷新");
            },
            destroy:function(){
                console.log("移除");
            },
            
            /*=========================
              Method
              ===========================*/
            _eachBreak:function(arr,fn){
                for(var i=0;i<arr.length;i++){
                    if(fn(arr[i],i)==false)break;
                }
            },
            _tabActive:function(index){
                for(var i=0,t;t=this.tabs[i++];){
                    t.classList.remove("active");
                }
                this.tabs[index].classList.add("active");
            },
            _initSlider:function(){
                var self=this;
                return new Slider("#ID-Pages",{
                    onSlideChangeEnd:function(e){
                        self._tabActive(e.activeIndex);
                    }
                });
            },
            /*=========================
              Events
              ===========================*/
            _attach:function(e){
                var self=this;
                for(var i=0,t;t=this.tabs[i++];){
                    t.addEventListener("click",function(e){
                        self._onClickTab(e);
                    },false);
                }
            },
            /*=========================
              Event Handler
              ===========================*/
            _onClickTab:function(e){
                var index=0;
                this._eachBreak(this.tabs,function(n,i){
                    if(n==e.target){
                        index=i;
                        return false;
                    }
                });
                this._tabActive(index);
                this.slider.slideTo(index);
            }
        }

        window.addEventListener("load",function(){
            view.initialize();
        }, false);
        //定义exmobi返回
        function back(){history.go(-1);}
    </script>
</body>
</html>
